<template>
  <!--区域经理会员-->
  <div>
    <div class="header">
      <div class="employee" @click="toggle">
        <span>{{employee.employeeName}}</span>
        <img src="../../assets/select.png" alt="" width="12">
      </div>
      <ul v-show="isshow" class="employeelist">
        <li v-for="(item,index) in employeeList" @click="check(item)">{{item.employeeName}}</li>
      </ul>
      <div class="search"><input type="text" placeholder="请输入会员名/手机号搜索" v-model="content"><img
        src="../../assets/search.png" alt="" width="16" @click="goSearch()"></div>
    </div>
    <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <wv-group
        v-infinite-scroll="getList"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
      >
        <ul class="list">
          <li v-for="(item,index) in accountGoodsList">
            <ul v-if="item.sourceType=='3'|| item.sourceType=='4'">
              <li>{{item.mobile}} <span>{{item.userName}}</span>
                <router-link :to="{path:'wanshanziliao',query:{accountGoodsId: item.accountGoodsId}}"
                             v-if="item.isPrivatedata==2&&item.vipCardState==1">
                  <wv-button type="default" :mini="true" class="lookdetail">完善资料</wv-button>
                </router-link>
                <router-link :to="{path:'shenhe',query:{vipRecordId:item.businessId}}" v-if="item.vipCardState==3">
                  <wv-button type="default" :mini="true" class="daishen">审核</wv-button>
                </router-link>
                <router-link :to="{path:'yuangongdetail',query:{vipRecordId:item.businessId}}"
                             v-if="item.vipCardState==4">
                  <wv-button type="default" :mini="true" class="lookdetail">查看详情</wv-button>
                </router-link>
              </li>

              <li>{{item.goodsName}}
                <span v-if="item.vipCardState==0">待使用</span>
                <span v-if="item.vipCardState==1">有效</span>
                <span class="dongjie" v-if="item.vipCardState==2">已过期</span>
                <span class="weiguo" v-if="item.vipCardState==3">未开通</span>
                <span class="weiguo" v-if="item.vipCardState==4">未通过</span>
                <span class="dongjie" v-if="item.vipCardState==5">冻结</span>
                <span class="dongjie" v-if="item.vipCardState==6">退卡中</span>
                <span class="dongjie" v-if="item.vipCardState==7">已退卡</span>
                <span class="dongjie" v-if="item.vipCardState==8">已转卡</span>
                <span class="dongjie" v-if="item.vipCardState==8">已转赠</span>
              </li>
              <li>会员卡号：{{item.vipCardNo}}
                <p v-if="isHaveHekaRemark==1">
                  <wv-button type="default" :mini="true" class="lookdetail" @click="goRemarkHeka(item.accountGoodsId)">
                    合卡
                  </wv-button>
                </p>
              </li>
              <li>
                <p>
                  <span>开卡时间：{{item.buyDate}}</span><br/>
                  <span>提交时间：{{item.createDate}}</span>
                </p>
                <p><img src="../../assets/yuangong.png" alt="" width="15">{{item.employeeName}} <span
                  v-if="item.heKaRemark"> & {{item.heKaRemark}}</span></p>
              </li>
              <li>
                <p v-if="item.payType=='PAY_WX'"><img src="../../assets/weixin.png" alt="" width="15">微信</p>
                <p v-if="item.payType=='PAY_UNDERLINE'"><img :src="item.paywayIcon | imgPathFilter" alt="" width="15">{{item.paywayName}}
                </p>
                <span>{{item.payAmount}}元</span>
              </li>

            </ul>
            <ul v-else>
              <li>{{item.mobile}} <span>{{item.userName}}</span>
                <router-link :to="{path:'wanshanziliao',query:{accountGoodsId: item.accountGoodsId}}"
                             v-if="item.isPrivatedata==2&&item.vipCardState==1">
                  <wv-button type="default" :mini="true" class="lookdetail">完善资料</wv-button>
                </router-link>
              </li>
              <li>{{item.goodsName}}
                <span v-if="item.vipCardState==0">待使用</span>
                <span v-if="item.vipCardState==1">有效</span>
                <span class="dongjie" v-if="item.vipCardState==2">已过期</span>
                <span class="weiguo" v-if="item.vipCardState==3">未开通</span>
                <span class="weiguo" v-if="item.vipCardState==4">未通过</span>
                <span class="dongjie" v-if="item.vipCardState==5">冻结</span>
                <span class="dongjie" v-if="item.vipCardState==6">退卡中</span>
                <span class="dongjie" v-if="item.vipCardState==7">已退卡</span>
                <span class="dongjie" v-if="item.vipCardState==8">已转卡</span>
                <span class="dongjie" v-if="item.vipCardState==8">已转赠</span>
              </li>
              <li>会员卡号：{{item.vipCardNo}}
                <p v-if="isHaveHekaRemark==1">
                  <wv-button type="default" :mini="true" class="lookdetail" @click="goRemarkHeka(item.accountGoodsId)">
                    合卡
                  </wv-button>
                </p>
              </li>
              <li>
                <p>
                  <span>开卡时间：{{item.buyDate}}</span>
                </p>
                <p><img src="../../assets/yuangong.png" alt="" width="15">{{item.employeeName}}<span
                  v-if="item.heKaRemark"> & {{item.heKaRemark}}</span>
                </p>
              </li>
              <li>
                <p v-if="item.payType=='PAY_WX'"><img src="../../assets/weixin.png" alt="" width="15">微信</p>
                <p v-if="item.payType=='PAY_UNDERLINE'"><img :src="item.paywayIcon | imgPathFilter" alt="" width="15">{{item.paywayName}}
                </p>
                <span>{{item.payAmount}}元</span>
              </li>
            </ul>
          </li>
        </ul>
      </wv-group>
    </div>
    <div class="model" v-show="isVisible">
      <div class="bg"></div>
      <div class="modelContent">
        <wv-group class="textarea">
          <wv-textarea placeholder="请填写合卡销售的真实姓名" :rows="3" v-model="remarkHeka"></wv-textarea>
        </wv-group>
        <p class="btn">
          <wv-button type="default" :mini="true" @click="subRemarkHeka()">提交</wv-button>
          <wv-button type="default" :mini="true" @click="isVisible=false">取消</wv-button>
        </p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getMyEmployee, employeeVip, employeeRemarkHeka} from '../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: '',
    props: {},
    data() {
      return {
        isshow: false,
        employee: {employeeName: '销售'},
        employeeList: [],
        accountGoodsList: [],
        content: '',
        accountGoodsId: '',
        remarkHeka: '',
        isVisible: false,
        isHaveHekaRemark: 0,
        wrapperHeight: 0,
        page: 1,
        rows: 8,
        loading: false
      };
    },
    methods: {
      toggle() {
        this.isshow = !this.isshow
      },
      check(employee) {
        this.employee = employee;
        this.isshow = !this.isshow;
        this.page = 1;
        this.accountGoodsList = [];
        this.getList();
      },
      getMyEmployeeData() {
        getMyEmployee({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.employeeList = res.object;
          } else {
            Toast.fail(res.info)
          }
        })
      },
      getList() {
        let params = {
          queryEmployeeId: this.employee.employeeId,
          content: this.content,
          page: this.page,
          rows: this.rows
        };
        this.getData(params);
      },
      getData(params) {
        this.loading = true;
        employeeVip(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.isHaveHekaRemark = res.object.isHaveHekaRemark;
            let data = res.object.pqGrid;
            let list = data.rows;
            let pages = data.pages;
            this.pages = pages;
            let totalNum = data.totalNum;
            this.totalNum = totalNum;
            if (list.length > 0) {
              this.accountGoodsList = this.accountGoodsList.concat(list);
            }
            if (this.page < this.pages) {
              this.page++;
              this.loading = false
            } else {
              this.loading = true
            }
          } else {
            Toast.fail(res.info)
          }
        })
      },
      goSearch() {
        this.page = 1;
        this.accountGoodsList = [];
        this.getList();
      },
      goRemarkHeka(accountGoodsId) {
        this.isVisible = true;
        this.accountGoodsId = accountGoodsId;
        this.remarkHeka = '';
      },
      subRemarkHeka() {
        let remarkHeka = this.remarkHeka;
        if (this.$myUtils.isNull(remarkHeka)) {
          Toast.fail("合卡备注未填写");
          return;
        }
        let params = {accountGoodsId: this.accountGoodsId, remarkHeka: remarkHeka};
        employeeRemarkHeka(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.isVisible = false;
            this.page = 1;
            this.accountGoodsList = [];
            this.getList();
          } else {
            Toast.fail(res.info);
          }
        })
      }
    },
    created() {
      this.getMyEmployeeData();
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .header {
    display: flex;
    padding: 10px;
    position: relative;
    margin-bottom: 10px;
    overflow: visible;
    z-index: 2;

    .employeelist {
      position: absolute;
      width: 88%;
      top: 75px;
      left: 10px;
      right: 10px;
      text-align: left;
      padding: 10px;
      border: 1px solid #eee;
      background-color: #fff;
    }

    .employee, .search input {
      border: 1px solid #eee;
      box-shadow: 0 3px 4px rgba(17, 17, 17, 0.05);
      border-radius: 7px;
      height: 25px;
      line-height: 25px;
      padding: 10px;
      color: #111;
    }

    .employee {
      flex: 0 100px;
      margin-right: 10px;

      img {
        float: right;
        margin-top: 10px;
      }
    }

    .search {
      position: relative;
      width: calc(100% - 110px);

      input {
        width: 90%;
      }

      img {
        position: absolute;
        right: 20px;
        top: 16px;
      }
    }
  }

  .list {
    > li {
      margin: 15px 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;

      li {
        margin-bottom: 10px;
      }

      li:first-child {
        font-size: 16px;
        color: #111;
        font-weight: 700;

        span {
          color: #999;
          margin-left: 10px;
        }

        button {
          float: right;
        }

        .daishen {
          background-color: #f98e3c;
          color: #fff;
        }

        .lookdetail {
          background-color: #fff;
          border: 1px solid #f98e3c;
          color: #f98e3c;
        }
      }

      li:nth-child(2) {
        line-height: 35px;
        height: 35px;
        color: #111;
        font-size: 17px;
        font-weight: 700;

        span {
          font-size: 15px;
          float: right;
          color: #f98e3c;
        }

        .weiguo {
          color: #2d93f0;
        }

        .no {
          color: #e96673;
        }

        .dongjie {
          color: #999;
        }
      }

      li:nth-child(3) {
        font-size: 12px;
        color: #666;
        display: flex;
        text-align: left;

        p {
          flex: 1;
        }

        p:last-child {
          text-align: right;
        }

        .lookdetail {
          background-color: #fff;
          border: 1px solid #f98e3c;
          color: #f98e3c;
          height: 30px;
        }
      }

      li:nth-child(4), li:last-child {
        font-size: 12px;
        color: #666;
        display: flex;
        text-align: left;

        img {
          margin-right: 5px;
        }

        p {
          flex: 1;
        }
      }

      li:nth-child(4) {
        text-align: left;

        img {
          vertical-align: text-bottom;
        }

        p:last-child {
          text-align: right;
        }
      }

      li:last-child {
        img {
          vertical-align: middle;
        }

        span {
          color: #f98e3c;
          font-size: 15px;
          text-align: right;
        }
      }
    }

    > li:last-child {
      border-bottom: none;
    }

  }

  .bg {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 50px;
  }

  .model .modelContent {
    background-color: #fff;
    /*border-radius: 8px;*/
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    padding: 15px 0;

    .textarea .weui-cell {
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f8f8f8;
      width: 81%;
      margin: auto;
    }

    li:first-child {
      margin-bottom: 10px;
    }

    .btn {
      text-align: right;
      padding: 15px 15px 0;

      button {
        height: 30px;
        line-height: 30px;
        color: #fff;
        width: 75px;
        border-radius: 25px;
      }

      button:last-child {
        background-color: #ccc;
        border: 1px solid #ccc;
        color: #fff;
      }

      button:first-child {
        background-color: #f98e3c;
        margin-right: 20px;

      }
    }
  }
</style>
